<!-- 会员充值记录 -->
<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { reactive } from 'vue'
// 全局数据
const data = reactive({
  list: [],
  page: 1,
  status: 'loadmore'
})
// 首次加载
onLoad(options => {
  getList()
})
// 监听页面滚动到底部
onReachBottom(() => {
  getList()
})
// 查询充值记录列表
function getList() {
  console.log('会员充值记录页面', data.page)
  if (data.page >= 3) return
  data.status = 'loading'
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      data.list.push({
        time: '2024-07-28 09:30',
        amount: '100.00',
      })
    }
    data.page++
    data.status = data.page >= 3 ? 'nomore' : 'loadmore'
  }, 2000);
}
</script>

<template>
  <view class="member-record-page">
    <!-- 空状态 -->
    <up-empty v-if="data.list.length <= 0" mode="data" text="暂无充值记录" marginTop="200rpx">
    </up-empty>
    <!-- 列表 -->
    <template v-else>
      <view class="list">
        <view class="item" v-for="(item, index) in data.list" :key="index">
          <text class="left">{{ item.time }}</text>
          <text class="right">+ {{ item.amount }}</text>
        </view>
      </view>
      <!-- 加载更多 -->
      <up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" />
    </template>
  </view>
</template>

<style lang="scss" scoped>
.member-record-page {
  padding-bottom: 60rpx;

  & .list {
    padding: 0 30rpx;

    & .item {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      & .left {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
      }

      & .right {
        font-weight: 500;
        font-size: 30rpx;
        color: #FFC870;
      }
    }
  }
}
</style>